<template>
	<view style="height: 200rpx;" class="bs">
		<view style="justify-content: flex-end;" class="h100r df aic p40lr bb2f">
			<view class="complete-btn">
				完成换装
			</view>
		</view>
		<up-tabs class="df jcsb" :list="list1" @click="click"></up-tabs>
	</view>
	<swiper class="f1"  :current="currentTab" :duration="1000">
		<swiper-item class="h100 ofys">
			<view class="swiper-item">
				<oldTerminalVue />
			</view>
		</swiper-item>
		<swiper-item  class="h100 ofys">
			<view class="swiper-item">
				<newTerminalVue />
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
import { ref } from 'vue';
import oldTerminalVue from './oldTerminal.vue';
import newTerminalVue from './newTerminal.vue';

const list1 = ref([
		{
			name: '旧终端'
		},
		{
			name: '新终端'
		}
	]);
	const currentTab = ref(0)
	
	const click = (e)=>{
		currentTab.value = e.index
	}
</script>

<style lang="scss" scoped>
	.complete-btn{
		padding: 14rpx 20rpx;
		background-color: #2D6CE8;
		color: #fff;
		border-radius: 16rpx;
	}
	
</style>
<style lang="scss">
page{
	height: 100%;
	display: flex;
	flex-direction: column;
}
:deep(.u-tabs__wrapper__nav){
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
</style>
